<template>
<!--  数据可视化组件库示例页面-->
<div class="box">
  <div class="header">
    <span class="condition-item" :class="activeItem === 0?'active':''" @click="handleGet(0)">进行中</span>
    <div class="Separator">|</div>
    <span class="condition-item" :class="activeItem === 1?'active':''" @click="handleGet(1)">已通过</span>
    <div class="Separator">|</div>
    <span class="condition-item" :class="activeItem === 2?'active':''" @click="handleGet(2)">未通过</span>
  </div>

  <div class="center" v-if="myVideoList.length !== 0">
    <div class="action">
      <div class="prompt" v-if="selectAction">
        已经选择{{checkList.length}}条视频
        <el-button type="warning" @click="handleDelete"><el-icon><Delete /></el-icon>删除</el-button>
      </div>
      <div class="prompt" v-else></div>

      <el-button type="primary" v-if="!selectAction" @click="selectAction = true">批量管理</el-button>
      <el-button type="primary" v-else @click="selectAction = false">退出管理</el-button>
    </div>
    <div class="content" v-if="!selectAction">
      <div class="video-item" v-for="item in myVideoList" :key="item.videoId">
        <el-image style="width: 100%;height: 130px;border-radius: 5px;" fit="cover" :src="item.videoCover"></el-image>
        <div class="title">{{item.videoTitle}}</div>
        <div class="time">{{item.videoPublishTime}}</div>
      </div>
    </div>
    <el-checkbox-group v-else v-model="checkList" size="large" @change="handleChange">
      <div class="content">
        <div class="video-item" v-for="item in myVideoList" :key="item.videoId">
          <el-checkbox style="position: absolute;right: 5px;top:5px" :value="item.videoId" />
          <el-image style="width: 100%;height: 130px;border-radius: 5px;" fit="cover" :src="item.videoCover"></el-image>
          <div class="title">{{item.videoTitle}}</div>
          <div class="time">{{item.videoPublishTime}}</div>
        </div>
      </div>
    </el-checkbox-group>
  </div>
  <div class="center" v-else>
    <el-empty :description="'一个稿件都没有，请换一个筛选条件'"></el-empty>
  </div>

<!--  <el-checkbox-group v-model="checkList">-->
<!--    <el-checkbox label="Option A" value="Value A" size="large"/>-->
<!--    <el-checkbox label="Option B" value="Value B" size="default"/>-->
<!--    <el-checkbox label="Option C" value="Value C" size="small"/>-->
<!--    <el-checkbox label="disabled" value="Value disabled" disabled />-->
<!--    <el-checkbox-->
<!--        label="selected and disabled"-->
<!--        value="Value selected and disabled"-->
<!--        disabled-->
<!--    />-->
<!--  </el-checkbox-group>-->
</div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {deleteMyVideo, getMyVideo} from "@/api/api.js";
import {ElMessage} from "element-plus";

const myVideoList = ref([])
const queryParam = reactive({
  page:1,
  pageSize:8,
  status:1
})
onMounted(async ()=>{
  await handleGet(1);
})

/**
 * 获取视频数据
 * @param sign 标识要获取的状态
 * @returns {Promise<void>}
 */
const handleGet = async (sign) => {
  if(activeItem.value === sign){
    return
  }
  activeItem.value = sign
  queryParam.status = sign
  const res = await getMyVideo(queryParam);
  console.log(res)
  myVideoList.value = res.data.records
}


const activeItem = ref(-1)

const  selectAction = ref(false)
const checkList = ref([])

const deleteList = ref()
const handleChange = async (val) => {
  console.log(val)
  console.log(checkList.value)
  try {
    deleteList.value = val
    const res = await deleteMyVideo(checkList.value)
    ElMessage.success("删除成功")
  } catch (e){
    ElMessage.error("删除失败:"+e.message)
  }

}

const handleDelete = () => {

}
</script>
<style lang="scss" scoped>
.box{
  .header{
    box-sizing: border-box;
    padding: 10px 20px;
    color: #505050;
    display: flex;
    .condition-item{
      cursor: pointer;
    }
    .Separator{
      margin: 0 15px;
      color: var(--gray-font-color--);
    }
    .active{
      color: var(--subject-color--);
    }
  }
  .center{
    .action{
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
      .prompt{
        display: flex;
        justify-content: space-between;
        width: 220px;
      }
      box-sizing: border-box;
      padding-right: 20px;
    }
    .content{
      display: flex;
      align-content: space-around;
      flex-wrap: wrap;
      .video-item{
        width: 229px;
        height: 180px;
        border-radius: 5px;
        overflow: hidden;
        //background-color: #4097ff;
        margin-right:20px;
        position: relative;
        .title{
          font-size: 14px;
          height: 20px;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .time{
          height: 18px;
          line-height: 18px;
          color: var(--gray-font-color--);
          font-size: 13px;
        }
      }
    }
  }
}

:deep(.el-checkbox.el-checkbox--large .el-checkbox__inner) {
  height: 25px;
  width: 25px;
  font-size: 20px;
}

:deep(.el-checkbox__inner:after) {
  border: 1px solid transparent;
  border-left: 0;
  border-top: 0;
  box-sizing: content-box;
  content: "";
  height: 12px;
  left: 10px;
  position: absolute;
  top: 5px;
  transform: rotate(45deg) scaleY(0);
  transform-origin: center;
  transition: transform .15s ease-in .05s;
  width: 3px;
}
</style>





<!--<div class="action">-->
<!--<div class="prompt" v-if="selectAction">-->
<!--  已经选择{{checkList.length}}条视频-->
<!--  <el-button type="warning" @click="handleDelete"><el-icon><Delete /></el-icon>删除</el-button>-->
<!--</div>-->
<!--<div class="prompt" v-else></div>-->

<!--<el-button type="primary" v-if="!selectAction" @click="selectAction = true">批量管理</el-button>-->
<!--<el-button type="primary" v-else @click="selectAction = false">退出管理</el-button>-->
<!--</div>-->
<!--<div class="content" v-if="!selectAction">-->
<!--<div class="video-item" v-for="item in myVideoList" :key="item.videoId">-->
<!--  <el-image style="width: 100%;height: 130px;border-radius: 5px;" fit="cover" :src="item.videoCover"></el-image>-->
<!--  <div class="title">{{item.videoTitle}}</div>-->
<!--  <div class="time">{{item.videoPublishTime}}</div>-->
<!--</div>-->
<!--</div>-->
<!--<el-checkbox-group v-else v-model="checkList" size="large" @change="handleChange">-->
<!--<div class="content">-->
<!--  <div class="video-item" v-for="item in myVideoList" :key="item.videoId">-->
<!--    <el-checkbox style="position: absolute;right: 5px;top:5px" :value="item.videoId" />-->
<!--    <el-image style="width: 100%;height: 130px;border-radius: 5px;" fit="cover" :src="item.videoCover"></el-image>-->
<!--    <div class="title">{{item.videoTitle}}</div>-->
<!--    <div class="time">{{item.videoPublishTime}}</div>-->
<!--  </div>-->
<!--</div>-->
<!--</el-checkbox-group>-->